<template>
  <view class="home-main">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="onClickBtn" />
    <view class="cont">
      <view class="top">
        <u--form labelPosition="left" :model="searchForm" :rules="searchFormRules" ref="searchForm" labelWidth="140" style="padding-bottom: 16rpx">
          <u-form-item label="考试:" prop="recordsName" borderBottom @click="showRecords = true;">
            <u--input v-model="searchForm.recordsName" border="bottom" readonly placeholder="请选择考试" @click="showRecords = true;"></u--input>
            <u-icon slot="right" name="arrow-right" @click="showRecords = true;"></u-icon>
          </u-form-item>
           <u-form-item label="身份证号:" prop="studentIdcard" borderBottom>
            <u--input v-model="searchForm.studentIdcard" border="none"></u--input>
          </u-form-item>
        </u--form>
        <u-button @click="submit" color="linear-gradient(to right, #00b99e, #00e5c3)" shape="circle" text="查询" ></u-button>
      </view>
      <view class="bottom" v-if="'studentCandidateId' in studentInfo">
        <!-- 学生信息 -->
        <view class="title">{{ studentInfo.recordsName }}</view>
        <view class="inner">
          <view class="line">
            <view class="line-left">姓名：</view>
            <view class="line-right">{{ studentInfo.studentName }}</view>
          </view>
          <view class="line">
            <view class="line-left">准考证号：</view>
            <view class="line-right">{{ studentInfo.studentCandidateId }}</view>
          </view>
          <view class="line">
            <view class="line-left">身份证号：</view>
            <view class="line-right">{{ studentInfo.studentIdcard }}</view>
          </view>
          <view class="line">
            <view class="line-left">报到时间：</view>
            <view class="line-right">{{ studentInfo.checkTime }}</view>
          </view>
          <view class="line">
            <view class="line-left">考试时间：</view>
            <view class="line-right">{{ studentInfo.examTime }}</view>
          </view>
          <view class="line">
            <view class="line-left">考点名称：</view>
            <view class="line-right">{{ studentInfo.examLocation }}</view>
          </view>
          <view class="line">
            <view class="line-left">考点地址：</view>
            <view class="line-right">{{ studentInfo.examAddress }}</view>
          </view>
          <view class="line">
            <view class="line-left">二维码：</view>
            <view class="line-right">
              <img class='qr' :src='"data:image/png;base64," + studentInfo.image' />
            </view>
          </view>
        </view>
        <view class="down">
          <u--text @click="getPdf" color='#00b99e' size="24rpx" text="下载准考证"></u--text>
        </view>
      </view>
    </view>
    <u-picker confirmColor='#26A69A' :show="showRecords" keyName="name" :columns="recordsList" title="请选择考试" description="考试" @confirm='recordsSelect' @cancel="showRecords = false" @close="showRecords = false" itemHeight='80'>
    </u-picker>
  </view>
</template>
<script>
import hccmConfig from "@/common/hccm-config.js"
import mRequest from "@/api/index";
export default {
  data() {
    return {
      config: {
        title: "查看准考证并下载",
        color: "#ffffff",
        back: false,
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#00b99e", "#25bba4", "#00e5c3", "#06eeca"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#a9a1ff", "#6970ff", "#ff55ff", "#ff9999"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
        rightButton: [
          // {
          //   key: 'btn1',
          //   icon: '&#xe651;',
          //   position: 'left'
          // },
          // {
          //     key: 'btn2',
          //     icon: '&#xe64c;',
          //     position: 'left'
          // },
          // {
          //   key: "btn3",
          //   icon: "&#xe6eb;",
          //   position: "left"
          // }
        ]
      },
      searchForm:{
        recordsName: '',
        recordsId: '',
        studentIdcard: '350681199712290010'
      },
      searchFormBak: {

      },
        // studentIdcard: '350681199712290010',
      searchFormRules: {
        recordsName: {
					type: 'string',
					required: true,
					message: '请选择考试',
					trigger: ['blur', 'change']
				},
				studentIdcard: {
					type: 'string',
					required: true,
					message: '请填写身份证号',
					trigger: ['blur', 'change']
				},
      },
      recordsList: [[]],
      showRecords: false,
      studentInfo: {},
    };
  },
  onLoad(){
    this.getListTabulation()
  },
  onPageScroll(e) {
    // 重点，用到滑动切换必须加上
    // this.$refs.hxnb.pageScroll(e);
  },
  methods: {
    // 提交 查询
    submit(){
      let params = {
        recordsId: this.searchForm.recordsId,
        studentIdcard: this.searchForm.studentIdcard
      }
      this.studentInfo = {}
      mRequest.getPdfPreview(params).then(res=>{
        if(res.code === 0){
          this.studentInfo = res.data
        }else{
          this.studentInfo = {}
        }
        this.searchFormBak = JSON.parse(JSON.stringify(this.searchForm))
        console.log(res)
      })
    },
    getPdf(){
      let params = {
        recordsId: this.searchFormBak.recordsId,
        studentIdcard: this.searchFormBak.studentIdcard,
      }
      this.$axios({
        url: `${hccmConfig.HCCM_HOST_URL}/my-osce/excel/student/getPdf`,
        method: 'post',
        responseType: 'blob',
        params: params
      }).then(({ data }) => {
        var binaryData = []
        binaryData.push(data)
        let blob = new Blob(binaryData, {
          type: ' application/pdf'
        })
        setTimeout(() => {
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, 'link')
          } else {
            const link = document.createElement('a')
            console.log(window.URL.createObjectURL)

            link.download = `${this.studentInfo.studentName}-${this.searchFormBak.recordsName}`
            link.style.display = 'none'
            link.href = window.URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
            this.$message.success(`导出成功`)
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    onClickBtn(data) {
      //console.log(data);
      uni.showToast({
        title: `key为 ${data.key} 的按钮`,
        icon: "none",
        duration: 1300
      });
    },
    recordsSelect(e){
      console.log(e.value[0])
      this.searchForm.recordsId = e.value[0].value 
      this.searchForm.recordsName = e.value[0].name 
      this.showRecords = false
    },
    // 获取考试列表
    getListTabulation(){
      let params = {
        limit: 10000,
        page: 1,
        examStatus: '0',// 0是未考
        orderSql: 'creat_date desc'
      }
      mRequest.listTabulation(params).then(res=>{
        console.log(res.page.records)
        let recordsList = []
        if(res.page.records.length > 0){
          res.page.records.map(v => {
            recordsList.push({
              name: v.recordsName,
              value: v.id
            })
          })
          this.searchForm.recordsId = res.page.records[0].id 
          this.searchForm.recordsName = res.page.records[0].recordsName 
          this.recordsList = [recordsList]
          this.submit()
        }
      })
    },
  }
};
</script>
<style lang='scss'>
.home-main {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .cont {
    .top {
      margin: 20rpx;
      background: #00b99e10;
      padding: 20rpx;
      border-radius: 8rpx;
    }
    .bottom{
      margin: 20rpx;
      background: #00b99e10;
      padding: 20rpx;
      border-radius: 8rpx;
      .title{
        padding-bottom: 10rpx;
        font-weight: 600;
        color: #333;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .inner{
        border: 1px solid #00b99e80;
        border-radius: 10rpx;
        .line{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30rpx;
          font-weight: 400;
          .line-left{
            width: 180rpx;
            min-height: 100rpx;
            color: #333;
            border-bottom: 1px solid #00b99e80;
            display: flex;
            justify-content: flex-end;
          }
          .line-right{
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            min-height: 100rpx;
            padding: 0 10rpx;
            border-left: 1px solid #00b99e80;
            border-bottom: 1px solid #00b99e80;
            .qr{
              height: 300rpx;
              width: 300rpx;
            }
          }
        }
        .line:last-of-type{
          .line-left{
            border-bottom: none;
            height: 400rpx;
          }
          .line-right{
            border-bottom: none;
            height: 400rpx;
            display: flex;
            align-content: center;
            justify-content: center;
          }
        }
      }
      .down{
        width: 100%;
        padding: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .u-text{
          justify-content: center !important;
        }
      }
    }
  }
}
</style>